<!-- 流程定义详情 -->
<template>
  <div class="process-detail">
    <el-page-header @back="goBack" :title="processInfo.name || '流程定义详情'" />
    
    <div class="detail-content">
      <!-- 基本信息卡片 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="流程标识">{{ processInfo.key }}</el-descriptions-item>
          <el-descriptions-item label="流程名称">{{ processInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="流程版本">{{ processInfo.version }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="processInfo.suspended ? 'warning' : 'success'">
              {{ processInfo.suspended ? '挂起' : '激活' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="流程描述" :span="2">{{ processInfo.description }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 表单样式卡片 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>表单样式</span>
          </div>
        </template>
        <div class="form-preview" v-if="formJson">
          <v-form-render
            :form-json="formJson"
            :form-data="{}"
            :option-data="{}"
            :disabled="true"
          />
        </div>
        <el-empty v-else description="暂无表单数据" />
      </el-card>

      <!-- BPMN流程图卡片 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>流程图</span>
          </div>
        </template>
        <div class="bpmn-preview" v-if="bpmnXml">
          <!-- 这里可以集成BPMN.js来展示流程图 -->
          <div ref="bpmnContainer" class="bpmn-container"></div>
        </div>
        <el-empty v-else description="暂无流程图数据" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import BpmnViewer from 'bpmn-js/lib/Viewer'
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import { VFormRender } from 'vform3-builds'

export default {
  name: 'ProcessDefinitionDetail',
  components: {
    VFormRender
  },
  data() {
    return {
      processInfo: {},
      formData: null,
      formJson: null,
      bpmnXml: null,
      bpmnViewer: null
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    // 获取流程定义详情
    fetchProcessDetail() {
        const id = this.$route.params.id
        this.$get('/getProcessDefinitionDetail',{
            id : id
        }).then(res =>{
            if(res.code === 200){
                this.processInfo = res.data
                // 获取表单数据
                this.fetchFormData()
                // 获取BPMN数据
                this.fetchBpmnData()
            }else{
                ElMessage.error('获取流程定义详情失败')
            }
        }).catch(err =>{
            console.log(err)
        })
    },
    // 获取表单数据
    async fetchFormData() {
      try {
        const res = await this.$get('/getProcessForm',{id : this.processInfo.id})
        if (res.code === 200) {
          // 确保formJson是对象格式
          let formJson = res.data.formJson
          if (typeof formJson === 'string') {
            formJson = JSON.parse(formJson)
          }
          this.formJson = formJson
          this.formData = res.data
        }
      } catch (error) {
        console.error(error)
      }
    },
    // 获取BPMN数据
    async fetchBpmnData() {
      try {
        const res = await this.$get('/getProcessBpmn',{id : this.processInfo.id})
        if (res.code === 200) {
          this.bpmnXml = res.data
          this.$nextTick(() => {
            this.renderBpmn()
          })
        }
      } catch (error) {
        console.error(error)
      }
    },
    // 渲染BPMN流程图
    renderBpmn() {
      if (!this.bpmnXml) return
      
      // 使用Viewer替代Modeler
      this.bpmnViewer = new BpmnViewer({
        container: this.$refs.bpmnContainer
      })

      // 导入BPMN XML
      this.bpmnViewer.importXML(this.bpmnXml).then(() => {
        // 调整视图以适应容器
        const canvas = this.bpmnViewer.get('canvas')
        canvas.zoom('fit-viewport')
      }).catch(err => {
        console.error('Error rendering BPMN diagram:', err)
        ElMessage.error('流程图渲染失败')
      })
    }
  },
  created() {
    this.fetchProcessDetail()
  },
  beforeUnmount() {
    // 销毁BPMN查看器实例
    if (this.bpmnViewer) {
      this.bpmnViewer.destroy()
    }
  }
}
</script>

<style scoped>
.process-detail {
  padding: 20px;
}

.detail-content {
  margin-top: 20px;
}

.detail-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-preview {
  min-height: 200px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  overflow: auto;
}

.bpmn-container {
  height: 600px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
}

/* 移除BPMN.js相关样式，因为Viewer不需要这些样式 */
:deep(.djs-palette),
:deep(.djs-context-pad),
:deep(.djs-overlay-context-pad) {
  display: none !important;
}

/* 禁用鼠标交互样式 */
:deep(.djs-element) {
  cursor: default !important;
}

:deep(.djs-connection) {
  cursor: default !important;
}

:deep(.djs-shape) {
  cursor: default !important;
}
</style> 